<!-- 
    Copyright 2014 Huawei Technologies Co., Ltd. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
        http://www.apache.org/licenses/LICENSE-2.0
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License. 
-->
<div class="row">
    <div class="col-lg-12">
        <section class="widget">
            <div class="widget-body">
                    <fieldset>
                        <legend><strong>Component</strong> setup</legend>
                        <div class="row mb-lg treeview col-md-12">
                            <div class="col-lg-12">
                                <div class="clearfix">
                                    <ul class="nav nav-tabs pull-xs-left componentTabs" id="componentTabs" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link active" id="base-tab" data-toggle="tab" href="#base" role="tab" aria-controls="base" aria-expanded="false">
                                                <span>Base Config</span>
                                                <i class="arrow arrow-left"></i>
                                                <i class="arrow arrow-right"></i>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" id="design-tab" data-toggle="tab" href="#design" role="tab" aria-controls="design" aria-expanded="false">
                                                <span>Design</span>
                                                <i class="arrow arrow-left"></i>
                                                <i class="arrow arrow-right"></i>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" id="env-tab" data-toggle="tab" href="#env" role="tab" aria-controls="env" aria-expanded="true">
                                                <span>Env Setting</span>
                                                <i class="arrow arrow-left"></i>
                                                <i class="arrow arrow-right"></i>
                                            </a>
                                        </li>
                                        <div class="component-type-select-div">
                                            <label for="action-component-select" class="select-label">Select Component Type</label>
                                            <div class="select-div">
                                                <select id="action-component-select" style="width:100%">
                                                    <option value="Kubernetes">Kubernetes</option>
                                                </select>
                                            </div>
                                        </div>
                                    </ul>
                                </div>
                                <div class="tab-content mb-lg" id="componentTabsContent">
                                    <div role="tabpanel" class="tab-pane clearfix active" id="base" aria-labelledby="base-tab" aria-expanded="true">
                                        <form id="component-form" class="form-horizontal" data-parsley-priority-enabled="false" novalidate="novalidate">
                                            <fieldset>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="hint-field" class="col-sm-4 control-label">
                                                                Component Timeout
                                                            </label>
                                                            <div class="col-sm-7 input-group">
                                                                <input type="number" id="action-timeout" name="action-timeout" class="form-control"> 
                                                                <span class="input-group-addon">(S)</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="normal-field" class="col-sm-4 control-label">
                                                                External Data URI
                                                            </label>
                                                            <div class="col-sm-7">
                                                                <input type="text" id="action-data-from" name="action-data-from" class="form-control" required>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="normal-field" class="col-sm-4 control-label">
                                                                Repository Name
                                                            </label>
                                                            <div class="col-sm-7">
                                                                <input type="text" id="k8s-pod-image-name" name="k8s-pod-image-name" class="form-control" required>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="normal-field" class="col-sm-4 control-label">
                                                                Image Tag
                                                            </label>
                                                            <div class="col-sm-7">
                                                                <input type="text" id="k8s-pod-image-tag" name="k8s-pod-image-tag" class="form-control" required>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </fieldset>
                                        </form>
                                        <div class="row type-header">
                                            <div class="type-label">Kubernetes</div>
                                            <div class="type-setting">
                                                <input type="radio" id="setting-way-base" name="k8s-setting-way"> 
                                                <span style="margin-left:5px">Base Setting</span>
                                                <input type="radio" id="setting-way-advanced" name="k8s-setting-way" style="margin-left:30px">
                                                <span style="margin-left:5px">Advanced Setting</span>
                                            </div>
                                        </div>
                                        <form id="base-setting-form" class="form-horizontal" data-parsley-priority-enabled="false" novalidate="novalidate">
                                            <fieldset>  
                                                <div id="basesetting" class="hide">
                                                    <div class="row resource-setting-div">
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="normal-field" class="col-sm-4 control-label">
                                                                        CPU Limits
                                                                    </label>
                                                                    <div class="col-sm-7">
                                                                        <input type="number" step="0.01" id="k8s-cpu-limits" name="k8s-cpu-limits" class="form-control" required>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="normal-field" class="col-sm-4 control-label">
                                                                        CPU Requests
                                                                    </label>
                                                                    <div class="col-sm-7">
                                                                        <input type="number" step="0.01" id="k8s-cpu-requests" name="k8s-cpu-requests" class="form-control" required>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row"> 
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="normal-field" class="col-sm-4 control-label">
                                                                        Memory Limits
                                                                    </label>
                                                                    <div class="col-sm-7 input-group">
                                                                        <input type="number" step="0.01" id="k8s-memory-limits" name="k8s-memory-limits" class="form-control" required>
                                                                        <span class="input-group-addon">(Mi)</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="normal-field" class="col-sm-4 control-label">
                                                                        Memory Requests
                                                                    </label>
                                                                    <div class="col-sm-7 input-group">
                                                                        <input type="number" step="0.01" id="k8s-memory-requests" name="k8s-memory-requests" class="form-control" required>
                                                                        <span class="input-group-addon">(Mi)</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row"> 
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="normal-field" class="col-sm-4 control-label">
                                                                        Service Type
                                                                    </label>
                                                                    <div class="col-sm-7 input-group">
                                                                        <select id="service-type-select" style="width:100%">
                                                                            <option value="ClusterIP">Cluster IP</option>
                                                                            <option value="NodePort">Node Port</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div id="ports-setting" class="row port-setting-div">
                                                    </div>
                                                </div>
                                            </fieldset>
                                        </form>
                                        <form id="advanced-setting-form" class="form-horizontal" data-parsley-priority-enabled="false" novalidate="novalidate">
                                            <fieldset id="advancedsetting" class="row advanced-setting-div hide">
                                                <div class="advanced-content">
                                                    <div class="col-md-6 panel">
                                                        <div class="panel-heading clearfix">
                                                            <span class="panel-title">Service</span>
                                                            <!-- <span class="panel-subtitle">Service setting (Json / Yaml)</span> -->
                                                        </div>
                                                        <div class="panel-body" style="min-height:500px;padding:0">
                                                            <textarea class="advanced-service-textarea" id="serviceCodeEditor" required></textarea>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 panel">
                                                        <div class="panel-heading clearfix">
                                                            <span class="panel-title">Pod</span>
                                                            <!-- <span class="panel-subtitle">Pod setting (Json / Yaml)</span> -->
                                                        </div>
                                                        <div class="panel-body" style="min-height:500px;padding:0">
                                                            <textarea class="advanced-pod-textarea" id="podCodeEditor" required></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </fieldset>
                                        </form>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="design" aria-labelledby="design-tab" aria-expanded="false">
                                        <div id="designMode">
                                            <div class="action-way-div row">
                                                <span class="action-design-select"></span>
                                                <span class="action-json" title="switch to json mode"></span>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6 import-div">
                                                    <div class="panel">
                                                        <div class="panel-heading input-panel-heading">
                                                            <i class="glyphicon glyphicon-cloud-upload inputicon"></i>
                                                            <span class="panel-title">Input Tree</span>
                                                            <span class="panel-subtitle">The action default input json data</span> 
                                                        </div>
                                                        <div class="panel-body input-panel-body" style="min-height:500px">
                                                            <div id="inputTreeStart" class="tree-add-button">
                                                                <div id="inputStartBtn" class="btn-div">
                                                                    <span class="glyphicon glyphicon-plus nohover"></span>
                                                                    <div class="desc">
                                                                        <label class="desc-label">Add New Value</label>
                                                                        <div class="desc-btn">
                                                                            <span class="glyphicon glyphicon-plus"></span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div id="inputTreeDiv" class="json-editor"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6 import-div">
                                                    <div class="panel">
                                                        <div class="panel-heading clearfix">
                                                            <i class="glyphicon glyphicon-cloud-download outputicon"></i>
                                                            <span class="panel-title">Output Tree</span>
                                                            <span class="panel-subtitle">The action default output json data</span> 
                                                        </div>
                                                        <div class="panel-body" style="min-height:500px">
                                                            <div id="outputTreeStart" class="tree-add-button">
                                                                <div id="outputStartBtn" class="btn-div">
                                                                    <span class="glyphicon glyphicon-plus nohover"></span>
                                                                    <div class="desc">
                                                                        <label class="desc-label">Add New Value</label>
                                                                        <div class="desc-btn">
                                                                            <span class="glyphicon glyphicon-plus"></span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div id="outputTreeDiv" class="json-editor"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tree-icon-desc-row">
                                                <div class="tree-icon-desc-item">
                                                    <div class="tree-icon icon-s"></div>
                                                    <div class="tree-icon-label">String</div>
                                                </div>
                                                <div class="tree-icon-desc-item">
                                                    <div class="tree-icon icon-o"></div>
                                                    <div class="tree-icon-label">Object</div>
                                                </div>
                                                <div class="tree-icon-desc-item">
                                                    <div class="tree-icon icon-n"></div>
                                                    <div class="tree-icon-label">Number</div>
                                                </div>
                                                <div class="tree-icon-desc-item">
                                                    <div class="tree-icon icon-a"></div>
                                                    <div class="tree-icon-label">Array</div>
                                                </div>
                                                <div class="tree-icon-desc-item">
                                                    <div class="tree-icon icon-b"></div>
                                                    <div class="tree-icon-label">Boolean</div>
                                                </div>
                                                <div class="tree-icon-desc-item">
                                                    <div class="tree-icon icon-none"></div>
                                                    <div class="tree-icon-label">Null</div>
                                                </div>
                                                <div class="tree-icon-desc-item">
                                                    <div class="tree-icon icon-add"></div>
                                                    <div class="tree-icon-label">Add New Value</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="jsonMode">
                                            <div class="action-way-div row">
                                                <span class="action-design" title="switch to design mode"></span>
                                                <span class="action-json-select"></span>
                                            </div>
                                            <div class="col-md-6 import-div">
                                                <div class="panel">
                                                    <div class="panel-heading input-panel-heading">
                                                        <i class="input-from-edit-icon"></i>
                                                        <span class="panel-title">Input From Edit</span>
                                                        <span class="panel-subtitle">The action default input json data</span> 
                                                    </div>
                                                    <div class="panel-body input-panel-body">
                                                        <div id="inputCodeEditor" class="codeEditor"></div>
                                                        <div class="col-md-4 col-md-offset-4 row editor-transfer">
                                                            <span id="inputFromJson" class="col-md-4 code-to-tree"></span>
                                                            <span id="inputToJson" class="col-md-4 tree-to-code"></span>
                                                        </div>
                                                        <div id="inputTreeEditor" class="treeEditor"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6 import-div">
                                                <div class="panel">
                                                    <div class="panel-heading clearfix">
                                                        <i class="output-from-edit-icon"></i>
                                                        <span class="panel-title">Output From Edit</span>
                                                        <span class="panel-subtitle">The action default output json data</span> 
                                                    </div>
                                                    <div class="panel-body">
                                                        <div id="outputCodeEditor" class="codeEditor"></div>
                                                        <div class="col-md-4 col-md-offset-4 row editor-transfer">
                                                            <span id="outputFromJson" class="col-md-4 code-to-tree"></span>
                                                            <span id="outputToJson" class="col-md-4 tree-to-code"></span>
                                                        </div>
                                                        <div id="outputTreeEditor" class="treeEditor"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane" id="env" role="tabpanel" aria-labelledby="env-tab" aria-expanded="false">
                                         <div class="col-lg-12 form-horizontal" id="component-envs">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </fieldset>  
            </div>
        </section>
    </div>
</div>